<!DOCTYPE html>
<html>
<!-- xmlns:th="http://www.thymeleaf.org"
	 xmlns:shiro="http://www.pollix.at/thymeleaf/shiro" -->
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<!-- th:href="@{/resource/layui/css/layui.css} -->
<link rel="stylesheet" href="/resource/layui/css/layui.css">
</head>
<body>
	<h1 align="center" style="color:green">记账管理</h1>
	<br>
	<br>
	<form class="layui-form  layui-form-pane" action="">
  <div class="layui-form-item" align="center">
  <div class="layui-inline">
      <label class="layui-form-label">类型选择:</label>
      <div  class="layui-input-inline">
       	<select name="type" id="type"   class="layui-input">
       	<option value=" ">不限</option>
       	</select>
      </div>
    </div>
    <div class="layui-inline">
      <label class="layui-form-label">开始时间:</label>
      <div  class="layui-input-inline">
      	<input type="text" name="startTime" id="startTime" class="layui-input">
      </div>
    </div>
    <div class="layui-inline">
      <label class="layui-form-label">结束时间:</label>
      <div  class="layui-input-inline">
      	<input type="text" name="endTime" id ="endTime" class="layui-input">
      </div>
    </div>
  </div>
   <div class="layui-form-item" align="center">
    <div class="layui-inline" >
      <div  class="layui-input-inline" >
      	 <button class="layui-btn" lay-submit="" lay-filter="search"  id="search">搜索</button>
      	 <button type="reset" class="layui-btn layui-btn-primary">重置</button>
      </div>
    </div>
   </div>
</form>
<table id="dataTable" lay-filter="dataTable"></table>
<script type="text/javascript"  src="/resource/layui/layui.js"></script>
<script type="text/html" id="headerBtn">
	<div class="layui-btn-group">
  		<button type="button" class="layui-btn layui-btn" lay-event='add'>
    		<i class="layui-icon">&#xe654;</i>
  		</button>
	</div>
</script>


<script type="text/html"  id="edit">
	<form class="layui-form  layui-form-pane" action="">

<div class="layui-form-item" > 
    <div class="layui-inline">
      <label class="layui-form-label">类型:</label>
      <div class="layui-input-block" id="addType">

      </div>
    </div>
  </div>

  <div class="layui-form-item" > 
      <label class="layui-form-label">标题:</label>
      <div  class="layui-input-block">
      	<input type="text" name="title" class="layui-input">
      </div>
  </div>

  <div class="layui-form-item" > 
    <div class="layui-inline">
      <label class="layui-form-label">日期:</label>
      <div  class="layui-input-inline">
      	<input type="text" name="billTime" id ="time" class="layui-input">
      </div>
    </div>
	<div class="layui-inline">
      <label class="layui-form-label">金额:</label>
      <div  class="layui-input-inline">
      	<input type="text" name="price" class="layui-input">
      </div>
    </div>
  </div>

	<div class="layui-form-item" > 
    <div class="layui-black">
      <label class="layui-form-label">说明:</label>
      <div  class="layui-input-block">
      	<input type="text" name="remark" class="layui-textarea">
      </div>
    </div>
  </div>

    <div class="layui-inline">
      <div  class="layui-input-inline">
		<button class="layui-btn" style="display:none" lay-submit="" lay-filter="dataEdit"  id="dataEdit">编辑</button>
      </div>
    </div>
</form>
</script>

<script type="text/javascript">
layui.use(['jquery','layer','form','table','upload','laydate'],function(){
	var $ = layui.jquery;
	var layer = layui.layer;
	var form = layui.form;
	var table = layui.table;
	var upload = layui.upload;
	var laydate = layui.laydate;
	laydate.render({
	    elem: '#startTime' //指定元素
	  });
	laydate.render({
   	 elem: '#endTime' //指定元素
  	});
	$("#type").click(function(){
		$.post("/sys/bill-type/type",function(rs){
			$.each(rs,function(index,value){
				$("#type").append("<option value="+value.id+">"+value.name+"</option>")
			});
			form.render('select');
		});
	});
	$("#type").click();
	//初始化表格
	var t  = table.render({
		id:"tableId",
		elem:"#dataTable",
		url:'/sys/bills/list',//数据请求地址
		page:true,//开启分页
		parseData:function(rs){
			if(rs.code != 200){
				layer.msg(rs.msg);
				return false;
			}
			 return {
			      "code": rs.code, //解析接口状态
			      "msg": rs.msg, //解析提示文本
			      "count": rs.data.count, //解析数据长度
			      "data": rs.data.data //解析数据列表
			    };
		},
		response:{
			statusCode: 200
		},
		toolbar:'#headerBtn',
		cols:[ [
			{type:'checkbox'},
			{field:'id',title:'id'},
			{field:'title',title:'账单标题'},
			{field:'typeId',title:'类型',templet: function(d){
				if(d.typeId==1){
					return '<b style=color:red>支出</b>';
				}else if(d.typeId==2){
					return '<b style=color:green>收入</b>';
				}else if(d.typeId==3){
					return '<b style=color:blue>转账</b>';
				}else if(d.typeId==4){
					return '<b style=color:yellow>借出</b>';
				}else if(d.typeId==5){
					return '<b style=color:green>借入</b>';
				}else if(d.typeId==6){
					return '<b style=color:green>还入</b>';
				}else if(d.typeId==7){
					return '<b style=color:green>还出</b>';
				}
			}},
			{field:'typeName',title:'类型'},
			{field:'billTime',title:'时间'},
			{field:'price',title:'金额'},
			{field:'remark',title:'备注'},
			{title:'操作',toolbar:"#rowBtn",fixed:'right'}
		] ]
		
	});
	//表单搜索
	form.on("submit(search)",function(d){
		t.reload({
			//将form表单数据  进行提交
			where:d.field,
			page:{
				curr:1
			}
		});
		//阻止表单提交
		return false;
	});
	table.on('toolbar(dataTable)', function(obj){
		 switch(obj.event){
			 case 'add':
				 layer.open({
						type:1,
						title:'编辑',
						content:$("#edit").html(),
						area:['800px','450px'],
						btn: ['编辑','取消'],
						btnAlign: 'c', //按钮居中
						success:function(iayero,index){
					 		laydate.render({
							    elem: '#time' //指定元素
							});
					 		 $.ajax({
									url:'/sys/bill-type/type',
									async:false,
									success:function(rs){
										$.each(rs,function(index,value){
					$("#addType").append("<input type='radio' name='typeId' value ="+value.id+" title="+value.name+">")
										});
									}
								});
					 		form.render();
					 	},
						yes: function(index){
							//监听弹出的表单提交
							form.on("submit(dataEdit)",function(d){
								$.post('/sys/bills/insert',d.field,function(rs){
									//返回数据进行转化
									if(rs.code == 200){
										$("#search").click();
										layer.close(index);
										layer.msg("修改成功");
										t.reload();
									}else{
										layer.msg(rs.msg);
									}
								});
								return false;
							});
							//使用程序点击  提交按钮 触发上面的监听
							$("#dataEdit").click();
						}
					});
		 	break;
		 }
	});
});
</script>
</body>
</html>